<template>
  <div>
    <head-top :headTitle="headTitle"></head-top>
    <div class="c_content">
      <div class="c_patient">
        <p class="c_patient_p">姓名：{{patientname}}</p>
        <p class="c_patient_p">患者信息：{{patientinfo}}</p>
        <p class="c_patient_p">症状：{{patientsymptom}}</p>
      </div>
      <section class="c_nav">
        <div><span @click="changeShowType='bingli'" :class="{c_nav_active: changeShowType =='bingli'}">病历</span></div>
        <div><span @click="changeShowType='liuyan'" :class="{c_nav_active: changeShowType =='liuyan'}">留言</span></div>
        <nuxt-link :to="{name:'openPrescribe',params:{patientname:this.patientname,patientinfo:this.patientinfo}}" class="guide_item" tag="li">开药方</nuxt-link>
      </section>
      <transition name="fade-choose">
        <section class="bingli" v-show="changeShowType =='bingli'">
            <div class="bingli_con" v-for="item1 in list1" :key="item1.id">
              <p ><span>病情：可以呼吸了</span><span class="bingli_time">{{item1.OPENTIME}}</span></p>
              <p>药方：{{item1.DURGSLIST}}</p>
            </div>
        </section>
      </transition>
      <transition name="fade-choose">
        <section class="liuyan" v-show="changeShowType =='liuyan'">
            <section class="liyan_con">
              <div v-for="item in list" :key="item.id">
                <p :class="{doctor:item.WHOSE==1,patient:item.WHOSE==2}"><span class="liuyan_time">{{item.LEAVETIME}}</span>{{item.WHOSE==1?"医生":"患者"}}：{{item.LEAVEMESSAGE}}</p>
              </div>
            </section>
            <section class="huifu">
              <input type="text" placeholder="请输入回复内容" class="inputMessage" v-model="inputValue">
              <button type="submit" class="buttonMessage" @click="submitLiuyan">回复</button>
            </section>
        </section>
      </transition>
    </div>
    <transition name="tipMove">
      <alert-tip :alertText='alertText' v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </transition>
  </div>
</template>
<script>
import headTop from "~/components/pagetwo/headTop";
import alertTip from "~/components/pagetwo/alertTip";

export default {
  components: {
    headTop,
    alertTip
  },
  data() {
    return {
      headTitle: "患者详情",
      changeShowType: "bingli",
      list: [],
      role: "",
      inputValue: "",
      alertText: "",
      showAlert: false,
      ts: this.newStore(),
      list1: []
    };
  },
  created() {
    this.getDayActivities(this.today);
    this.getbingliList();
    this.patientname = this.$route.params.name,
    this.patientinfo = this.$route.params.info,
    this.patientsymptom = this.$route.params.symptom
  },
  updated() {
    this.$nextTick(function() {
      var liuyan = this.$el.querySelector(".liuyan");
      liuyan.scrollTop = liuyan.scrollHeight;
    });
  },
  methods: {
    closeTip() {
      this.showAlert = false;
    },
    submitLiuyan() {
      /*
        判断是否输入留言内容
      */
      if (!this.inputValue) {
        this.showAlert = true;
        this.alertText = "请输入内容！";
        return false;
      }

      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;

      var res = JSON.stringify({
        OTRequest: {
          VERSION: "1.0",
          TN: "F27.APP.01.18",
          CLIENTID: "YLAPP",
          RYBID: "DOCTOR",
          TOKEN:
            "Ekzmrq5qIPxtYdlDKpLACV5vbxHsCfzJHnpOImO8qOj5ZngSq5kVFFTG5JQZjHf3",
          DATA: {
            doctorId: this.$root.doctorInfo.doctorId,
            leaveMessage: this.inputValue,
            flag: "1",
            patientId:this.$root.patientInfo.patientId
          }
        }
      });

      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var Newdate = y + "-" + m + "-" + d;

      this.spost(this.ts, "/doctor/debug/AppMainServlet.ap", {
        "": res
      }).then(ts => {
        this.list.push({
          LEAVETIME: Newdate,
          WHOSE: "1",
          LEAVEMESSAGE: this.inputValue
        });
        this.inputValue = "";
      });
    },
    getDayActivities(day) {
      this.curDay = day;
      var req = JSON.stringify({
        OTRequest: {
          VERSION: "1.0",
          TN: "F27.APP.01.17",
          CLIENTID: "YLAPP",
          RYBID: "DOCTOR",
          TOKEN:
            "Ekzmrq5qIPxtYdlDKpLACV5vbxHsCfzJHnpOImO8qOj5ZngSq5kVFFTG5JQZjHf3",
          DATA: {
            doctorId: this.$root.doctorInfo.doctorId,
            rowsperpage: "20",
            pageno: "1",
            ordercolumn: "leavetime",
            ordertype: "desc",
            patientId: this.$root.patientInfo.patientId,
          }
        }
      });

      this.spost(this.ts, "/doctor/debug/AppMainServlet.ap", {
        "": req
      }).then(ts => {
        this.list = ts.d.DATAOBJ.DATA.reverse();
      });
    },
    getbingliList() {
      var req = JSON.stringify({
        OTRequest: {
          VERSION: "1.0",
          TN: "F27.APP.01.20",
          CLIENTID: "YLAPP",
          RYBID: "DOCTOR",
          TOKEN:
            "Ekzmrq5qIPxtYdlDKpLACV5vbxHsCfzJHnpOImO8qOj5ZngSq5kVFFTG5JQZjHf3",
          DATA: {
            doctorId: this.$root.doctorInfo.doctorId,
            rowsperpage: "20",
            pageno: "1",
            ordercolumn: "openTime",
            ordertype: "desc",
            patientId: this.$root.patientInfo.patientId,
          }
        }
      });

      this.spost(this.ts, "/doctor/debug/AppMainServlet.ap", {
        "": req
      }).then(ts => {
        this.list1 = ts.d.DATAOBJ.DATA;
      });
    }
  }
};
</script>
<style>
body {
  background: #f5f5f5;
}
.c_content {
  background: #fff;
  padding-top: 2.8rem;
}
.c_patient {
  border-bottom: 1px solid #ddd;
  padding: 0.5rem 1rem;
}
.c_patient_p {
  font-size: 0.8rem;
  font-family: "Microsoft Yahei";
  color: #333;
  margin: 0.2rem;
}
.c_nav {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 0.6rem;
  border-bottom: 1px solid #ebebeb;
}
.c_nav div {
  flex: 1;
  text-align: center;
}
.c_nav span {
  font-size: 1rem;
  padding: 0.2rem;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav_active {
  color: #3190e8;
  border-bottom: 2px solid #3190e8;
}
.fade-choose-enter-active,
.fade-choose-leave-active {
  transition: opacity 0.2s;
}
.fade-choose-leave,
.fade-choose-leave-active {
  display: none;
}
.fade-choose-enter,
.fade-choose-leave-active {
  opacity: 0;
}
.bingli {
  padding: 1rem 0.8rem;
  margin-bottom: 3rem;
}
.bingli_con {
  line-height: 0.8rem;
  border-bottom: 1px solid #f1f1f1;
  margin: 0.5rem 0;
}
.bingli_con p {
  font-size: 0.9rem;
  padding: 0.2rem;
}
.bingli_time {
  float: right;
}
.liuyan {
  height: 22rem;
  overflow: auto;
  background-color: #f1f1f1;
}
.liuyan .patient {
  background-color: #dcdcdc;
  float: right;
  margin: 1rem;
  padding: 0.6rem;
  font-size: 0.9rem;
  margin-bottom: 0;
  width: 70%;
  word-break: break-all;
}
.liuyan .doctor {
  background-color: #fff;
  float: left;
  margin: 1rem;
  padding: 0.8rem;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0;
  width: 60%;
  word-break: break-all;
}
.liuyan_time {
  font-size: 0.4rem;
  display: block;
  color: #aaa;
}
.inputMessage {
  outline: none;
  margin-top: 0.5rem;
  height: 2rem;
  width: 80%;
  border: none;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
}
.buttonMessage {
  outline: none;
  margin-top: 0.5rem;
  width: 18%;
  height: 2rem;
  border: none;
  margin-left: 0.2rem;
  font-size: 0.9rem;
}
.huifu {
  position: fixed;
  width: 100%;
  bottom: 5rem;
  z-index: 99;
  overflow: hidden;
}
</style>

